<template>
  <div class="order">
    <a-card title="采购单查询">
      <a-form v-if="formHeaderVisible" class="formHeader">
        <a-row justify="start" :gutter="24">
          <a-col class="formHeader-criteria">
            <a-row :gutter="16">
              <a-col span="8">
                <a-form-item label="采购单别" label-col-flex="80px">
                  <a-input v-model="checkFrom.type" allow-clear @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="采购单号" label-col-flex="80px">
                  <a-input v-model="checkFrom.id" allow-clear @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="采购日期" label-col-flex="80px">
                  <a-date-picker v-model="checkFrom.purchaseDate" style="width: 100%" allow-clear />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="供应商" label-col-flex="80px">
                  <a-input v-model="checkFrom.supplier" allow-clear placeholder="请输入供应商名称或编号" @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="税种" label-col-flex="80px">
                  <a-input v-model="checkFrom.taxType" allow-clear placeholder="请输入" @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="备注" label-col-flex="80px">
                  <a-input v-model="checkFrom.remark" allow-clear placeholder="请输入" @keyup.enter="init" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col class="formHeader-btn">
            <a-space direction="vertical" :size="20">
              <a-button type="primary" @click="init">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button @click="reset">
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>重置</template>
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <formButtonGroup
        v-model:columns="columns"
        v-model:size="size"
        :config="config"
        :search-bar="searchBar"
        @refresh="init"
        @change-search-bar="changeSearchBar"
      >
        <div class="formHeader-criteria-postizz"></div>
        <template #leftboon>
          <a-button type="primary" @click="purchaseOrderGeneration">采购单新增</a-button>
        </template>
      </formButtonGroup>
      <!-- <div class="formHeader-buttom">
        <a-button type="primary" @click="purchaseOrderGeneration">采购单新增</a-button>
      </div> -->
      <vxe-table
        v-if="tabelValue"
        ref="tableRef"
        :data="tabelList"
        size="mini"
        show-footer
        :row-config="{ isCurrent: true, keyField: 'uuid', isHover: true }"
        :column-config="{ isCurrent: true, resizable: true }"
        :checkbox-config="{ checkRowKeys: defaultSelecteRowKeys, highlight: true }"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
        :menu-config="menuConfig"
        stripe
        border
        @checkbox-all="selectAllChangeEvent"
        @checkbox-change="selectChangeEvent"
        @menu-click="contextMenuBodyClickEvent"
      >
        <!-- <vxe-column type="checkbox" width="60" align="center"></vxe-column> -->
        <vxe-column field="type" title="单别" show-overflow align="center" sortable width="80">
          <template #default="{ row }"> {{ row.type }}</template>
        </vxe-column>
        <vxe-column field="id" title="单号" show-overflow align="center" sortable width="120">
          <template #default="{ row }"> {{ row.id }}</template>
        </vxe-column>
        <vxe-column field="supplierName" title="供应商" align="center" sortable width="120">
          <template #default="{ row }"> {{ row.supplierName }}</template>
        </vxe-column>
        <vxe-column field="supplier" title="供应商编号" show-overflow align="center" sortable width="120">
          <template #default="{ row }"> {{ row.supplier }}</template>
        </vxe-column>
        <vxe-column field="coinType" title="交易币种" show-overflow align="center" sortable width="100">
          <template #default="{ row }"> {{ row.coinType }}</template>
        </vxe-column>
        <vxe-column field="purchaseDate" title="采购日期" show-overflow align="center" sortable width="120">
          <template #default="{ row }"> {{ EFTimeFormatConversion(row.purchaseDate) }}</template>
        </vxe-column>
        <vxe-column field="taxType" title="税种" show-overflow align="center" sortable width="100">
          <template #default="{ row }"> {{ row.taxType }}</template>
        </vxe-column>
        <vxe-column field="tax" title="税率" show-overflow align="center" sortable width="100">
          <template #default="{ row }"> {{ multiplication({ x: 100, y: row.tax }) }}</template>
        </vxe-column>
        <vxe-column field="exchangeRate" title="汇率" show-overflow align="center" width="100">
          <template #default="{ row }"> {{ row.exchangeRate }}</template>
        </vxe-column>
        <vxe-column field="totalNumber" title="数量合计" show-overflow align="center" width="100">
          <template #default="{ row }"> {{ row.totalNumber }}</template>
        </vxe-column>
        <vxe-column field="totalTax" title="税额" show-overflow align="center" width="100">
          <template #default="{ row }"> {{ row.totalTax }}</template>
        </vxe-column>
        <vxe-column field="totalAmount" title="金额合计" show-overflow align="center" width="100">
          <template #default="{ row }"> {{ row.purchaseAmount }}</template>
        </vxe-column>
        <vxe-column field="remark" title="备注" align="center" width="220">
          <template #default="{ row }"> {{ row.remark }}</template>
        </vxe-column>
        <vxe-column field="option" title="操作" show-overflow align="center" width="280" fixed="right">
          <template #default="{ row }">
            <a-space>
              <a-button type="primary" size="mini" @click="viewDetails(row)">
                <template #default>查看详情</template>
              </a-button>
              <a-button type="primary" size="mini" @click="printDetails(row, row.type == 'APOZ' ? 'B' : 'A')">
                <template #default>打印此单据</template>
              </a-button>
              <!--  -->
              <a-button v-if="row.paymentId == '00'" type="primary" size="mini" @click="printDetails(row, 'C')">
                <template #default>预付货款单打印</template>
              </a-button>
              <a-popconfirm content="数据删除后无法恢复,并释放请购单!是否删除?" @ok="deleteOption(row)">
                <a-button type="primary" status="danger" size="mini">
                  <template #icon>
                    <icon-delete />
                  </template>
                  <template #default>删除</template>
                </a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </vxe-column>
      </vxe-table>
      <vxe-pager
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
        @page-change="init"
      >
      </vxe-pager>
    </a-card>
    <a-modal v-model:visible="visible" width="1400px" @ok="visible = false" @cancel="visible = false">
      <template #title> 详情查看 </template>
      <div>
        <a-descriptions v-if="visible" :data="desData" bordered />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue';
import importConfig from './purchaseOrder';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
import { EFTimeFormatConversion } from '@/utils/baseMethods';
import { multiplication } from '@/utils/calculationFormula';

export default defineComponent({
  name: 'OrderDom',
  components: { formButtonGroup },
  setup() {
    const {
      base,
      handlePageChange,
      handlePageSizeChange,
      init,
      selectChange,
      purchaseOrderGeneration,
      selectAllChangeEvent,
      selectChangeEvent,
      menuConfig,
      contextMenuBodyClickEvent,
      resetSelectItem,
      deleteOption,
      viewDetails,
      printDetails,
    } = importConfig();
    init();
    return {
      ...toRefs(base),
      handlePageChange,
      handlePageSizeChange,
      init,
      selectChange,
      purchaseOrderGeneration,
      EFTimeFormatConversion,
      selectAllChangeEvent,
      selectChangeEvent,
      menuConfig,
      contextMenuBodyClickEvent,
      resetSelectItem,
      deleteOption,
      viewDetails,
      multiplication,
      printDetails,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.arco-card-header) {
  border-bottom: none;
}

:deep(.arco-card-header-title) {
  text-align: left;
}

.order {
  &-queryForm {
    &-criteria {
      flex: 1 1 0;
    }

    &-btn {
      border-left: 1px solid #ddd;
      flex: 0 0 86px;
      text-align: right;
    }
  }

  &-table {
    font-weight: 500;
  }

  &-bomxa {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
  }
  &-pimasn {
    width: 300px;
    &-onminc {
      display: block;
      padding-bottom: 10px;
    }
  }
}
.formHeader {
  &-buttom {
    padding: 10px 0px;
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
  }
  &-criteria {
    flex: 1 1 0;
    &-postizz {
      display: flex;
      justify-content: flex-end;
      margin-top: 25px;
    }
  }

  &-btn {
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;
  }
}
.itemoption {
  font-size: 12px;
  color: #999;
  width: 100%;
  display: flex;
  align-content: center;
  align-items: center;
  &-aspanasm {
    font-size: 14px;
    font-weight: 900;
    color: #3d528b;
    padding-left: 10px;
  }
  &-ioasdoasn {
    width: 300px;
    display: inline-block;
    white-space: normal;
  }
}
</style>
